<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>BootStrap+AngularJS分页显示 </title>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/bootstrap.js"></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
		<script type="text/javascript" src="../js/angular.min.js"></script>
	</head>

	<body ng-app="pagenationApp" ng-controller="pagenationCtrl">
		<table class="table table-bordered">
			<tr>
				<th>序号</th>
				<th>商品编号</th>
				<th>名称</th>
				<th>价格</th>
			</tr>
			<tr ng-repeat="product in products">
				<td>{{$index+1}}</td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
		</table>
		<div>
			<ul class="pagination pull-right">
				<li>
					<a href ng-click="prev()">上一页</a>
				</li>
				<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
					<a ng-click=" selectPage(page) ">{{page}}</a>
				</li>
				<li>
					<a href ng-click="next() ">下一页</a>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		
		var pagenationApp=angular.module("pagenationApp",[]);
		pagenationApp.controller("pagenationCtrl",["$scope","$http",
			function($scope,$http){
			
			$scope.currentPage=1;
			$scope.pageSize=5;
			$scope.totalPages=0;
			$scope.totalCount=0;
			
			
			
			$scope.prev=function(){
				
				if($scope.currentPage>1){
					$scope.selectPage($scope.currentPage-1);
				}
			};
			
			$scope.next=function(){
				if($scope.currentPage<$scope.totalPages){
					$scope.selectPage($scope.currentPage+1);
				}
				
				
			};
			
			$scope.selectPage=function(page){
				$http({
					method: 'GET',
					url: '6_'+page+'.json',
					params: {
						page: page,
						pageSize: $scope.pageSize
					}
				}).success(function(data, status, headers, config) {
					//显示数据格式
					$scope.products=data.products;
					//显示总页数
					$scope.totalCount=data.totalCount;
					$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
					
					if(page<2){
						$scope.pageList=[];
						$scope.newPages=$scope.totalPages>5?  5 : $scope.totalPages;
						for(var i=0; i<$scope.newPages;i++){
							$scope.pageList.push(i+1);
						}
					}
					
				}).error(function(data, status, headers, config) {
					// 当响应以错误状态返回时调用
					alert("出错，请联系管理员 ");
				});
				//控制页面只能显示5页，不能超过最大页数
				if(page<1|| page>$scope.totalPages) return;
				
				//最多显示分页5
				if(page>2){
					var newPageList=[];
					
					for(var i=(page-3);i< ((page+2)> $scope.totalPages? $scope.totalPages:5); i++){
						
						newPageList.push(i+1);
					}
					
					$scope.pageList=newPageList;
					
				}
				$scope.currentPage=page;
				$scope.isActivePage(page);
				
			}
			
			$scope.isActivePage=function(page){
				return page == $scope.currentPage;
			}
			$scope.selectPage($scope.currentPage);
		}])
		
	</script>
</html>